import React from 'react';
import Welcome from "./components/highorder/Welcome"

// 创建一个高阶组件，对现有的组件进行扩展
function createWelcome(place,Component){
  return function(props){
    return (
        <div>
           <Component name={props.name} count={props.count} place={place}/> 
        </div>
    )
  }
}

// 创建一个高阶组件，对现有的组件进行扩展
function createWelcomePerson(name,Component){
    return class Wrap extends React.Component{
        constructor(props){
            super(props)
            this.state={
                count:0
            }
        }
        addCount(){
            this.setState({
                count:this.state.count+1
            })
        }
        render(){
            const {place}=this.props
            const {count}=this.state
            return (
                <div style={ {border: 'solid 5px green'} }>
                    <button onClick={e=>this.addCount()}>点击增加次数</button>
                    <Component name={name} place={place} count={count}/>
                </div>
            )
        }
    }
}

// 创建一个高阶组件，将现有Welcome组件的place属性进行固定
const WelcomeXlx=createWelcome("武汉",Welcome)
const WelcomeLx=createWelcomePerson("林杏",Welcome)

class App extends React.Component{
  constructor(props){
    super(props)
    this.state={}
  }

  render(){
    return(
        <div>
            <WelcomeXlx name="xlx"></WelcomeXlx>
        <WelcomeLx place="武汉"></WelcomeLx>
        </div>
    )
  }
}

export default App;
